<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="table">
    <p class="security-title"> 用户基本信息管理 </p>
    <div style="padding:10px;background-color:#fff;">
      <el-row style="background:#fff;margin-bottom:5px;">
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-plus"
                     @click="add">
            新增
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-download"
                     @click="exportExcel">
            导出到Excel
          </el-button>
        </el-col>
        <el-col :span="4" v-if="show">
          <el-button @click="showCont"
                     type="primary" icon="el-icon-arrow-up">
            隐藏查询条件
            <span v-if="!show" class="el-icon-arrow-down">展开查询条件</span>
          </el-button>
        </el-col>
        <el-col :span="4" v-if="!show">
          <el-button @click="showCont"
                     type="primary" icon="el-icon-arrow-down">
            展开查询条件
          </el-button>
        </el-col>
        <el-col :span="12" v-if="show">
          <el-form ref="form" :model="form" label-width="210px">

            <el-form-item label="会议名称：">
              <el-input placeholder="请输入会议名称" v-model="securityConferenceEntityQuery.conference_NAME"></el-input>
            </el-form-item>

            <el-form-item label="主办单位：">
              <el-select clearable filterable v-model="securityConferenceEntityQuery.company"
                         style="width: 300px;" value="">
                <el-option v-for="item in companyData"
                           :key="item.index"
                           :value="item.COMPANY"
                           :label="item.DES" style="width: 600px"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="会议类型：">
              <el-input placeholder="请输入会议类型" v-model="securityConferenceEntityQuery.types_OF_MEETING"></el-input>
            </el-form-item>

            <el-form-item class="input-space" label="会议时间：">
              <el-date-picker v-model="securityConferenceEntityQuery.dispatch_DATE" type="date"
                              placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="warning"
                         size="medium" icon="el-icon-refresh-left" @click="clear">
                重置
              </el-button>
              <el-button type="success"
                         size="medium" icon="el-icon-search" @click="query">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="24">
        <div style="padding:10px;background-color:#fff;margin-top:5px;">
          <el-row>
            <el-col :span="24" v-if="expandAndShrinkMark===false">
              <el-table
                  :data="securityConferenceList"
                  border
                  @selection-change="handleSelectionChange"
                  class="table"
                  id="outtable"
                  stripe
                  ref="multipleTable"
                  :height="divHeight"
                  v-loading="loading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
              >
                <el-table-column prop="userName" label="姓名" align="center"
                                 width="auto">
                  <template slot-scope="scope">
                    <a href="#"
                       @click="skip(scope.$index, scope.row, scope)">{{ scope.row.id }}</a>
                  </template>
                </el-table-column>
                <el-table-column prop="school" label="学校" align="center"
                                 width="auto">
                </el-table-column>
                <el-table-column prop="gender" label="性别" align="center"
                                 width="auto">
                </el-table-column>
                <el-table-column prop="education" label="教育学历" align="center"
                                 width="auto">
                </el-table-column>
                <el-table-column prop="classGrade" label="班级" align="center"
                                 width="auto">
                </el-table-column>
                <el-table-column prop="contact" label="联系方式" align="center"
                                 width="auto">
                </el-table-column>
                <el-table-column prop="studentNumber" label="学号" align="center"
                                 width="auto">
                </el-table-column>
                <el-table-column label="状态" align="center" width="150">
                  <template slot-scope="scope">
                    <el-tag size="medium" type='primary'>初始化</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right" align="center">
                  <template slot-scope="scope">
                    <div>
                      <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                        <el-button type="primary" icon="el-icon-edit" circle
                                   @click="update(scope.$index, scope.row)"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                        <el-button type="danger" icon="el-icon-delete" circle
                                   @click="del(scope.$index, scope.row)"></el-button>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination">
                <el-pagination
                    background
                    layout="total,prev, pager, next"
                    :page-size="pageSize"
                    :total="totallRows"
                    :current-page="currentPageNo"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    @prev-click="getLastPageData"
                    @next-click="getNextPageData"
                ></el-pagination>
              </div>
              <!-- 删除提示框 -->
              <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="delVisible = false">取 消</el-button>
                  <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
              </el-dialog>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {findAll, del} from "@/config/api";
import XLSX from "xlsx";
import FileSaver from "file-saver";

export default {
  name: "basicInformation",
  data() {
    return {

      // Table Data
      basicInformationData: [],

      // Insert / Update Data Entity
      basicInformationEntity: {
        id: "",
        userName: "",
        school: "",
        parentId: "",
        gender: "",
        education: "",
        classGrade: "",
        contact: "",
        studentNumber: ""
      },


      tableName: "security_management_meeting",

      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },


      link: true,
      addOrUpadte: "1",
      disabled: false,

      loading: false,
      editVisible: false,
      delVisible: false,

      totallRows: 0 /* 总数据行数 */,
      pageSize: 10 /* 当前页数据显示条数 */,
      currentPageNo: 1 /* 当前页码 */,

      show: false,
    };
  },

  created() {
    this.getData();
  },

  methods: {

    // 获取数据
    getData() {
      findAll({
        userName: "",
        school: ""
      }).then(resp => {
        if (resp.data.status) {
          this.basicInformationData = resp.data.data
        } else {
          this.$message.error("查询失败: " + resp.data.message);
        }
      });
    },

    //导出
    exportExcel() {
      let out = XLSX.utils.table_to_book(document.querySelector('#outtable'), {raw: true});
      let Exout = XLSX.write(out, {bookType: 'xlsx', bookSST: true, type: 'array'});
      try {
        FileSaver.saveAs(new Blob([Exout], {type: 'application/octet-stream'}), '安全会议数据表.xlsx');
      } catch (e) {
        if (typeof console !== 'undefined')
          console.log(e, Exout)
      }
      return Exout
    },
    showCont: function () {
      this.show = !this.show;
    },

    //新增
    add() {
      this.basicInformationEntity = {
        id: "",
        userName: "",
        school: "",
        parentId: "",
        gender: "",
        education: "",
        classGrade: "",
        contact: "",
        studentNumber: ""
      };
      this.$router.push({
        path: '/basicInformationDetail',   //跳转时带上参数id
        name: 'basicInformationDetail',
        params: {
          addOrUpdate: "1",
        }
      })
    },

    //修改
    update(index, row) {
      this.basicInformationEntity = {
        id: "",
        userName: "",
        school: "",
        parentId: "",
        gender: "",
        education: "",
        classGrade: "",
        contact: "",
        studentNumber: ""
      };
      this.$router.push({
        path: 'user/basicInformationDetail',   //跳转时带上参数id
        name: 'basicInformationDetail',
        params: {
          addOrUpdate: "2",
          id: row.id
        }
      })
    },

    //删除（打开弹出框）
    del(index, row) {
      this.delVisible = true;
      this.id = row.id;
    },

    //确认删除
    deleteRow() {
      del({
        id: this.id
      }).then(res => {
        if (res.data.status) {
          this.$message.success("删除成功 !");
          this.delVisible = false;
          this.getData();
        } else {
          this.$message.error("删除失败：" + res.data.message);
        }
      });
    },

    //重置
    clear() {
      this.basicInformationEntity = {
        id: "",
        userName: "",
        school: "",
        parentId: "",
        gender: "",
        education: "",
        classGrade: "",
        contact: "",
        studentNumber: ""
      };
      this.getData();
      this.$message.success("已重置");
    },

    /* 当选择项发生改变时触发该事件 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /* pageSize发生改变的事件 */
    handleSizeChange() {

    },
    /* 上一页点击事件 */
    getLastPageData() {

    },
    /* 下一页点击事件 */
    getNextPageData() {

    },
    handleCurrentChange(val) {
      this.currentPageNo = val;
    }
  }
};
</script>
<style scoped>

.handle-box {
  margin-bottom: 20px;
}

.elcon1 {
  height: 100%;
}

.elcon2 {
  height: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: 15px;
  border-radius: 5px;
  font-size: 14px;
}

.elcon3 {
  height: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center
}

.table1 {
  margin-left: 10px;
  width: 80%;
  font-size: 14px;
}

.table {
  width: 100%;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.input-suffix {
  margin: 20px;
}

.label {
  margin-right: 50px;
}

.userAuthorityLeft {
  width: 30%;
  color: blue;
}

.isChecked {
  font-size: 20px;
  font-weight: bold;
}
</style>
